import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux'
import style from './style.module.css'
import { Select, Input, Space, Button, Switch, Table, Modal, Radio, Breadcrumb } from 'antd';
import axios from 'axios'

const BargainGoods = (props) => {
    const [data, setData] = useState([])
    //获取数据
    useEffect(() => {
        axios({
            url: '/api/bargain',
            method: 'get'
        }).then(res => {
            // console.log(res,'111');
            setData(res.data.data)
        })
    }, []);
    //筛选数据
    const handleoption = (status) => {
        console.log(status);
        //判断
        if (status === "1") {
            status = 0
        } else {
            status = 1
        }
        axios({
            url: '/api/bargain',
            method: 'get',
            params: {
                status
            }
        }).then(res => {
            setData(res.data.data)
        })
    }
    const { Option } = Select;
    const handleClick = () => {
        props.history.push('/layout/addBargain')
    }
    //table表格
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: text => <a>{text}</a>,
        },
        {
            title: '砍价图片',
            dataIndex: 'img',
            key: 'img',
            render: img => <img src={img}></img>,
        },
        {
            title: '砍价名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '砍价简介',
            dataIndex: 'title',
            key: 'title',

        },
        {
            title: '结束时间',
            dataIndex: 'date',
            key: 'date',
        },
        {
            title: '状态',
            key: 'status',
            dataIndex: 'status',
            render: (text, record) => (
                <Switch defaultChecked={record.status} ></Switch>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a>
                        <Button onClick={() => { showModal(record) }}>编辑</Button>
                    </a>
                    <a onClick={() => handleDel(record.id)}>
                        <Button type="primary" size="small">
                            删除
                       </Button>
                    </a>
                </Space>
            ),
        },
    ];
    //删除数据
    const handleDel = (id) => {
        axios({
            url: `/api/bargainDel/${id}`,
            method: 'delete'
        }).then(res => {
            console.log(res, "123")
        })
    }
    //搜索
    const handleSearch = (value) => {
        console.log(value, "456");
        axios({
            url: '/api/bargain',
            method: 'get',
            params: {
                keyword: value.target.defaultValue
            }
        }).then(res => {
            setData(res.data.data)
            console.log(res, '123');
        })
    }
    const [isModalVisible, setIsModalVisible] = useState(false);
    //编辑
    const [name, setname] = useState("")
    const [id, setid] = useState('')
    const [title, settitle] = useState("")
    // const [status,setstatus]=useState("")
    const [value, setValue] = React.useState(1);
    const state1 = e => {
        // console.log('radio checked', e.target.value);
        console.log(e.target.value, "e123");
        setValue(e.target.value);
    };
    //打开弹框
    const showModal = (item) => {
        setIsModalVisible(true);
        // console.log(item, 'item');
        //回显
        setid(item.id)
        setname(item.name)
        settitle(item.title)
        setValue(item.status)
        console.log(item);
    }
    //点击确定
    const handleOk = () => {
        //关闭弹框
        setIsModalVisible(false)
        console.log(id, name, title, value);
        axios({
            url: '/api/bargainedit',
            method: 'put',
            data: {
                title,
                name,
                id,
                status: value,
            }
        }).then(res => {
            console.log(res, 'KSDHKL');
        })
    }
    const handleCancel = () => {
        setIsModalVisible(false)
    }
    return (
        <div className={style.bargainGoods}>
            <div className={style.bargainTop}>
                <Breadcrumb separator=">">
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item >营销</Breadcrumb.Item>
                    <Breadcrumb.Item >砍价管理</Breadcrumb.Item>
                    <Breadcrumb.Item>砍价商品</Breadcrumb.Item>
                </Breadcrumb>
            </div>
            <div className={style.bargainHeader}>
                <div className={style.headerBox1}>
                    <span>砍价状态：</span>
                    <Select
                        style={{ width: 200 }}
                        onChange={handleoption}
                    >
                        <Option value="0">开启</Option>
                        <Option value="1">关闭</Option>
                    </Select>
                </div>
                <div className={style.headerBox2}>
                    <span>商品搜索 : </span>
                    <div><Space direction="vertical">
                    {/* onPressEnter--按下回车的回调 */}
                        <Input placeholder="砍价名称" onPressEnter={handleSearch} /> 
                    </Space>
                    </div>
                </div>
            </div>
            <div className={style.bargainNav}>
                <Button type="primary" onClick={() => handleClick()}>添加砍价商品</Button>
            </div>
            <div className={style.brgainMain}>
                <Table columns={columns} rowKey="id" dataSource={data} scroll={{ y: 560 }} />
            </div>
            {/* 编辑 */}
            <Modal title="编辑数据" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <p>砍价名称：<input type="text" value={name} onChange={(e) => { setname(e.target.value) }} /></p>
                <p>砍价简介：<input type="text" value={title} onChange={(e) => { settitle(e.target.value) }} /></p>
                <p>砍价状态:
                    <Radio.Group onChange={state1} value={value}>
                        <Radio value={1}>开启</Radio>
                        <Radio value={0}>关闭</Radio>
                    </Radio.Group></p>
            </Modal>
        </div>
    );
}
export default connect((state) => {
    return {
    }
})(BargainGoods);
